<script setup lang="ts">
import { mobileRules, passwordRules } from '@/utils/rules'
import { ref } from 'vue';
import { showSuccessToast, showFailToast } from 'vant';
import { loginByPassword, loginByCode } from '@/apis/user'
import { useUserStore } from '@/stores'
import { useRoute, useRouter } from 'vue-router'
import { useMobileCode } from '@/composables/useMobileCode';
const store = useUserStore()
const router = useRouter()
const route = useRoute()
const password = ref('');
const isPass = ref(true)
const mobile = ref('');
const agree = ref(false);
const code = ref('')
const show = ref(false);
const { onSend, time, formRef } = useMobileCode(mobile, 'login')
// 表单提交

const handleLogin = async () => {

    if (!agree.value) { return showFailToast('请同意用户协议') }
    // 验证完毕，进行登录
    const res = isPass.value ? await loginByPassword(mobile.value, password.value) : await loginByCode(mobile.value, code.value)
    // console.log(res)
    store.setUser(res.data)

    // 如果有回跳地址就进行回跳，没有跳转到个人中心

    router.push((route.query.returnUrl as string) || '/user')
    showSuccessToast('登录成功')

}
const onChangePass = () => {
    console.log(11);
    isPass.value = !isPass.value
    // 重置 重置表单项的验证提示
    formRef.value?.resetValidation()
}

</script>

<template>
    <div class="login-page">
        <cp-nav-bar right-text="注册" @click-right="router.push('/register')"></cp-nav-bar>
        <!-- 头部 -->
        <div class="login-head">
            <h3>{{ isPass ? '密码登录' : '短信验证码登录' }}</h3>
            <a href="javascript:;" @click="onChangePass">
                <span>{{ !isPass ? '密码登录' : '短信验证码登录' }}</span>
                <van-icon name="arrow"></van-icon>
            </a>
        </div>
        <!-- 表单 -->
        <van-form autocomplete="off" @submit="handleLogin" ref="formRef">
            <van-field v-model="mobile" :rules="mobileRules" placeholder="请输入手机号" name="mobile" type="tel"></van-field>
            <van-field v-if="isPass" v-model="password" :rules="passwordRules" placeholder="请输入密码"
                :type="show ? 'text' : 'password'">
                <template #button>
                    <cp-icon @click="show = !show" :name="`login-eye-${show ? 'on' : 'off'}`"></cp-icon>
                </template>
            </van-field>
            <van-field v-else placeholder="短信验证码" v-model="code">
                <template #button>
                    <span class="btn-send" @click="onSend" :class="{ active: time > 0 }">
                        {{ time > 0 ? `${time}秒后发送验证码` : '发送验证码' }}</span>
                </template>
            </van-field>
            <div class="cp-cell">
                <van-checkbox v-model="agree">
                    <span>我已同意</span>
                    <a href="javascript:;">用户协议</a>
                    <span>及</span>
                    <a href="javascript:;">隐私条款</a>
                </van-checkbox>
            </div>
            <div class="cp-cell">
                <van-button block round type="primary" native-type="submit"> 登 录 </van-button>
            </div>
            <div class="cp-cell">
                <a href="javascript:;">忘记密码？</a>
            </div>
        </van-form>
        <!-- 底部 -->
        <div class="login-other">
            <van-divider>第三方登录</van-divider>
            <div class="icon">
                <img src="@/assets/qq.svg" alt="" />
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.login {
    &-page {
        padding-top: 46px;
    }

    &-head {
        display: flex;
        padding: 30px 30px 50px;
        justify-content: space-between;
        align-items: flex-end;
        line-height: 1;

        h3 {
            font-weight: normal;
            font-size: 24px;
        }

        a {
            font-size: 15px;
        }
    }

    &-other {
        margin-top: 60px;
        padding: 0 30px;

        .icon {
            display: flex;
            justify-content: center;

            img {
                width: 36px;
                height: 36px;
                padding: 4px;
            }
        }
    }
}

.van-form {
    padding: 0 14px;

    .cp-cell {
        height: 52px;
        line-height: 24px;
        padding: 14px 16px;
        box-sizing: border-box;
        display: flex;
        align-items: center;

        .van-checkbox {
            a {
                color: var(--cp-primary);
                padding: 0 5px;
            }
        }
    }

    .btn-send {
        color: var(--cp-primary);

        &.active {
            color: rgba(22, 194, 163, 0.5);
        }
    }
}
</style>